<template>
    <div>
        <el-dialog 
            :visible.sync="dialogVisible" 
            :close-on-click-modal="false"
            :before-close="handleClose">
            <div class="item-info-container">
                <el-image 
                    class="item-image"
                    fit="fill"
                    :src="itemRealImageUrl">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div class="item-name-container">{{ itemName }}</div>
                <div class="item-description-container">{{ itemDescription | descriptionFilter }}</div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { StaticHints } from '@/constant';

export default {
    name: 'InfoDisplayDialog',
    props: {
        dialogType: {
            type: String,
            default: 'building'
        },
    },
    data() {
        return {
            dialogVisible: false,
            itemName: '',
            itemDescription: '',
            itemRealImageUrl: '',
        }
    },
    filters: {
        descriptionFilter(val) {
            return val.replaceAll('$', '\n\n\u2003\u2003');
        }
    },
    methods: {
        openDialog() {
            this.dialogVisible = true;
        },
        setInfoProperty(cultureInfo = {
            itemName: '',
            itemDescription: '',
            itemRealImageUrl: '',
        }, isAutoOpen = true) {
            this.itemName = cultureInfo.itemName;
            this.itemDescription = cultureInfo.itemDescription;
            this.itemRealImageUrl = cultureInfo.itemRealImageUrl;
            if (isAutoOpen) {
                this.openDialog();
            }
        },
        handleClose(done) {
            done();
            if (this.dialogType === 'building') {
                this.$parent.issueNotification(StaticHints.FOLD_INFO_DIALOG_MSG);
            }
        }
    },
}
</script>

<style lang="scss" scoped>

    .item-info-container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 1fr 9fr;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
        box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.4);
        height: 95%;

        .item-image {
            grid-column: 1;
            grid-row: 1 / span 2;
            width: 100%;
            height: 100%;
            border: 2px solid black;
        }

        .item-name-container {
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            grid-column: 2;
            grid-row: 1;
            font-size: 3vh;
            font-weight: bold;
            letter-spacing: 2px;
            margin-left: 30px;
            border-bottom: 1px solid black;
        }

        .item-description-container {
            grid-column: 2;
            grid-row: 2;
            font-size: 1.6vh;
            margin-left: 30px;
            line-height: 1.5;
            padding-top: 20px;
            text-indent:2em;
            white-space: pre-line;
        }
    }

    ::v-deep .el-dialog__body {
        height: 60vh;
    }

</style>